<!-- 图书评论 -->
<template>
	<scroll-view class="pointslist" scroll-y="true">
		<view class="container">
			<view class="header">
				<image v-if="!textarea" src="../../image/lian.png" style="position: absolute;top: 0;z-index: 9; right: 0;margin:1.5rem 1.5rem 0 0;width: 2rem;height: 2rem;"></image>
				<textarea class="textarea" v-model="textarea" auto-height placeholder="您的评论将在审核通过后展示" placeholder-style="color:#bababa" />
				<view class="btn">
					<view class="mini-btn" @click="addSubmit()">提交</view>
				</view>
			</view>
			<view v-if="List.length > 0" class="content" v-for="(item,index) in List" :key="index">
				<view class="content_left">
					<image :src="item.head" style="width: 2.4rem;height: 2.4rem;border-radius: 50%;"></image>
					<view class="content_right">
						<view class="content_text">{{item.nickname}}</view>
						<view class="content_title">{{item.content}}</view>
					</view>
				</view>
				<view class="content_left">
					<!-- <image v-if="item.is_like == false" src="../../image/point_zan.png" style="width: 1.5rem;height: 1.35rem;" @click="getLike(item.comment_id)"></image>
					<image v-if="item.is_like == true" src="../../image/point_zan_color.png" style="width: 1.5rem;height: 1.35rem;" @click="getLike(item.comment_id)"></image>
					<text :class="item.is_like != true?'content_num':'content_num_color' ">{{item.like_num}}</text> -->
				</view>
			</view>
			<view v-else style="display: flex;align-items: center;justify-content: center;height: 50vh;" >
				<image src="../../image/wu_plun.png" style="width: 16rem;height:11rem ;"></image>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="show" :content="content" @confirm="confirm"></u-modal>
	</scroll-view>
</template>

<script>
	import { getbookcomment,getlike,getcount,savebookcomment } from '../../api/home.js'
	export default {
		data() {
			return {
				List:[],
				likeShow:true,
				textarea:'',
				articleId:'',
				show:false,
				content:'评价成功，审核通过后才可以展示'
			}
		},
		onShow: function() {
			document.title = window.localStorage.getItem('Title')
			uni.setNavigationBarTitle({
				title:window.localStorage.getItem('Title')
			})
		},
		mounted() {
			this.articleId = this.$Route.query.articleId
			
		},
		methods: {
			getList(){
				var parem = {
					article_id:this.$Route.query.articleId
				}
				getbookcomment(parem).then(res =>{
					this.List = res.data
				})
			},
			addSubmit(){
				if(this.textarea == ''){
					this.$refs.uToast.show({
						title: '请输入评论的内容',
						type: 'warning', 
					})
				}else{
					var parem = {
						article_id:this.$Route.query.articleId,
						data:this.textarea
					}
					savebookcomment(parem).then(res =>{
						// console.log(res)
						if(res.code == 0){
							this.show = true
						}
					})
				}
			},
			confirm(){
				uni.navigateBack({//返回
					delta: 1
				})
			},
			getLike(data){
				var parem = {
					table_id:data,
					type:2
				}
				getlike(parem).then(res =>{
					if(res.code == 0){
						this.getList()
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.pointslist{background: #FFFFFF;width: 100%;height:calc(100vh - 1rpx);}
	.container{padding:0 10px;margin-top: 1rem;}
	.header{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-bottom: 2px solid #eee;
		padding-bottom: 15px;
	}
	.textarea{
		background: #f3f3f3;
		width: 100%;
		height: 10rem !important;
		padding: 10px;
		border-radius: 0.5rem;
		font-size: 1rem;
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		margin-top: 10px;
	}
	.mini-btn{
		background: #3ebcc8 !important;
		width: 5rem;
		height: 2rem;
		border-radius: 0.3rem;
		font-size: 0.9rem;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.content{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0.8rem;
		margin-bottom: 1.5rem;
	}
	.content_left{
		display: flex;
		align-items: center;
	}
	.content_right{
		margin-left: 0.5rem;
	}
	.content_text{
		font-size: 0.9rem;
		color: #999999;
	}
	.content_title{
		font-size: 1rem;
		color: #333333;
	}
	.content_num{
		font-size: 0.8rem;
		color: #3ebcc8;
		margin-top: 0.5rem;
		margin-left: 0.15rem;
	}
	.content_num_color{
		font-size: 0.8rem;
		color: #fe6739;
		margin-top: 0.5rem;
		margin-left: 0.15rem;
	}
</style>
